<template>
	<div style="padding: 10px;height: 500px;">
		<div
			style="display: flex;margin-bottom: 8px;align-items: center;position: absolute;top: 0;z-index:100;background-color:white;width:100%;padding:8px;height:35px">

			<span style="font-weight: 600;">我的账单</span>

			<span style="margin: 0 10px 0 20px">过滤：</span>
			<el-checkbox style="margin:0 20px 0 0;" :indeterminate="isIndeterminate" v-model="checkAll"
				@change="handleCheckAllChange">全选</el-checkbox>
			<div style="margin: 15px 0;"></div>
			<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
				<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
			</el-checkbox-group>
			<el-switch style="display: block;margin-left: auto;" @change="change_value2()" v-model="value2" active-color="#13ce66"
				inactive-color="#ff4949" active-text="全部" inactive-text="待还">
			</el-switch>
			<el-button style="margin:0 30px 0 10px;" type="info" size="mini" @click="goBack()">返回</el-button>
		</div>
		<el-table show-summary :summary-method="getSummaries" height="680px" :header-cell-style="table_Header_Style"
			:cell-style="cell_Style" :default-sort="{ prop: 'date', order: 'descending' }"
			:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
			style="width: 100%;margin-top:45px" border script>
			<el-table-column type="index" label="序号" width="60" align="center">
			</el-table-column>
			<el-table-column prop="name" label="商品名称" min-width="110px">
			</el-table-column>
			<el-table-column sortable prop="costmoney" label="花费价格" align="right" width="140px" >
				<template slot-scope="scope">
					<span>
						<el-tag>{{ formatter(scope.row.costmoney) }}</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column sortable prop="duration" label="分期数" width="95px" >
			</el-table-column>
			<el-table-column sortable prop="startDate" label="第一期还款日"  width="140px">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.startDate }}</span>
				</template>
			</el-table-column>
			<el-table-column sortable prop="endDate" label="最后还款日"  width="140px">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.endDate }}</span>
				</template>
			</el-table-column>
			<el-table-column sortable prop="each_issue" label="每期还款" align="right" width="120px" >
				<template slot-scope="scope">
					<span>
						<el-tag>{{ formatter(scope.row.each_issue) }}</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column sortable prop="presentQS" label="已还期数"  width="110px">
				<template slot-scope="scope">
					<span>
						<i class="el-icon-s-flag" style="color: #cccccc"></i>
						{{ scope.row.presentQS }}
						<!-- <i class="el-icon-star-on" style="color:red"></i> -->
					</span>
				</template>
			</el-table-column>
			<el-table-column sortable prop="lastMonth" label="未还期数"  width="110px">
				<template slot-scope="scope">
					<span>
						<i class="el-icon-s-flag" style="color: red"></i>
						{{ scope.row.lastMonth }}
					</span>
				</template>
			</el-table-column>
			<el-table-column sortable prop="lastCost" label="仍需还款" align="right" width="130px" >
				<template slot-scope="scope">
					<span>
						<el-tag>{{ formatter(scope.row.lastCost) }}</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column sortable prop="belong" label="属于"  width="100px">
			</el-table-column>
			<el-table-column label="操作" width="115px" align="center">
				<template slot-scope="scope">
					<!-- <el-button type="primary" plain size="mini" @click="change(scope.row)">编辑</el-button> -->
					<!-- <el-button type="danger" size="mini" @click="deleteRow(scope.row)" plain>删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="[15, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
			:total="tableData.length" style="float:right;margin:8px 0;height:40px">
		</el-pagination>
	</div>
</template>

<script>
	const cityOptions = ['餐饮', '小荷包', '工资', '水电', '话费'];
	export default {
		components: {},
		props: {
			payListData: Array
		},
		watch: {
		},
		created() {
			this.tableData = [...this.payListData]
			this.filterPayment(this.checkedCities)
			this.change_value2()
		},
		methods: {
			change_value2() {
				this.filterPayment(this.checkedCities)
				let data = [...this.tableData]
				let table = []
				if (!this.value2) {
					for (let i = 0; i < data.length; i++) {
						if (data[i].lastMonth !== 0) {
							table.push(data[i])
						}
					}
					this.tableData = table
				} else {
					this.tableData = this.payListData
				}
			},
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
					if ((index === 1) || (index === 3) || (index === 4) || (index === 5) || (index === 7) || (
							index === 8) || (index === 10)) { // 不是金额相关没必要显示合计
						sums[index] = '';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] = sums[index].toFixed(2) + ' 元';
					} else {
						sums[index] = '';
					}
				});
				return sums
			},
			goBack() {
				this.$parent.$parent.closeDraw()
			},
			filterPayment(target) { // 过滤工资
				let table = [...this.payListData]
				let arr = []
				arr = table.filter(obj => !target.includes(obj.name));
				this.tableData = [...arr]
				console.log(target)
				console.table(this.tableData)
			},
			table_Header_Style({
				row,
				rowIndex
			}) { // 表头
				return {
					padding: '6.5px 4px 6.5px 4px !important',
					background: '#ECFFF5',
					color: 'black'
				}
			},
			cell_Style({
				row,
				clumn,
				rowIndex,
				columnIndex
			}) {
				const rainbowColor = n => { // 表驱动渲染单元格列的颜色
					const obj = {
						0: '#FFFFEC',
						1: '#E1F5FF',
					}
					return obj[n] ? obj[n] : 'rgba(239,239,239,0.3)'
				}
				return {
					padding: '6.5px 4px 6.5px 4px !important',
					background: rainbowColor(columnIndex)
				}
			},
			formatter(cellValue) { // 表格的金额格式化 **全部页面共用**
				if (!cellValue) {
					return '¥ 0.00'
				}

				function number_format(number, decimals, dec_point, thousands_sep) {
					number = (number + '').replace(/[^0-9+-Ee.]/g, '');
					var n = !isFinite(+number) ? 0 : +number,
						prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
						sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
						dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
						s = '',
						toFixedFix = function(n, prec) {
							var k = Math.pow(10, prec);
							return '' + Math.ceil(n * k) / k;
						};

					s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
					var re = /(-?\d+)(\d{3})/;
					while (re.test(s[0])) {
						s[0] = s[0].replace(re, "$1" + sep + "$2");
					}
					if ((s[1] || '').length < prec) {
						s[1] = s[1] || '';
						s[1] += new Array(prec - s[1].length + 1).join('0');
					}
					return s.join(dec);
				}
				var num = number_format(cellValue, 2, ".", ",")
				return "¥ " + num
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
			},
			handleCheckAllChange(val) {
				this.checkedCities = val ? cityOptions : [];
				this.isIndeterminate = false;
				this.filterPayment(this.checkedCities)
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;

				this.filterPayment(this.checkedCities)
			}
		},
		data() {
			return {
				checkAll: false,
				checkedCities: ['工资'],
				cities: cityOptions,
				isIndeterminate: true,
				value2: false,
				timeLineDialogShow: false,
				tableData: [],
				tableDataRow: {},
				currentPage: 1,
				pageSize: 15,
			}
		}
	}
</script>

<style scoped>

</style>